<template>
  <div class="index">
    <title-bar
      id="titleBarIndex"
      title="首页"
      :left-arrow="false"
      @clickRight="onClickRight"
    >
      <template #right>
        <div>设置</div>
      </template>
    </title-bar>
    <van-tabs
      v-model="active"
      line-height="2"
      :sticky="true"
      :offset-top="offsetTop"
      :swipeable="true"
      color="#3667FF"
      @change="onChangeTabItem"
      title-inactive-color="#919191"
      title-active-color="#3667FF"
    >
      <van-tab :title="`推荐(${listLeft.length})`">
        <van-pull-refresh
          v-if="listLeft.length > 0 || loading"
          v-model="refreshing"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            finished-text="没有更多了"
            :finished="true"
            style="background: #f6f9ff"
          >
            <div
              v-for="(item, index) in listLeft"
              :key="index"
              class="item"
              @click="onClickItem(item)"
            >
              {{ item }}
            </div>
          </van-list>
        </van-pull-refresh>
        <van-empty v-else style="margin-top: 40%">
          <template #description>
            <div class="tip">您暂无消息提醒</div>
          </template>
        </van-empty>
      </van-tab>
      <van-tab :title="`精品(${totalServe})`">
        <van-pull-refresh
          v-if="listRight.length > 0 || loading"
          v-model="refreshing"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            style="background: #f6f9ff"
          >
            <!-- <div style="height: 46px"></div> -->
            <div
              v-for="(item, index) in listRight"
              :key="index"
              class="item"
              @click="onClickItem(item)"
            >
              {{ item.title }}
            </div>
          </van-list>
        </van-pull-refresh>
        <van-empty v-else style="margin-top: 40%">
          <template #description>
            <div class="tip">您暂无消息提醒</div>
          </template>
        </van-empty>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import {
  Image as VanImage,
  Empty,
  Button,
  Divider,
  ActionSheet,
  Toast,
  Tab,
  Tabs,
  List,
  PullRefresh,
  Cell,
} from "vant";
import TitleBar from "@/components/title-bar";
export default {
  data() {
    return {
      listLeft: [],
      listRight: [],
      active: 0,
      refreshing: false,
      loading: true,
      finished: false,
      pageIndex: 1,
      total: 0,
      totalServe: 50,
      offsetTop: 0,
    };
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [VanImage.name]: VanImage,
    [Cell.name]: Cell,
    [Empty.name]: Empty,
    [Button.name]: Button,
    [Divider.name]: Divider,
    [ActionSheet.name]: ActionSheet,
    [Toast.name]: Toast,
    TitleBar,
  },
  computed: {},
  created() {},
  mounted() {
    //设置与顶部吸顶的距离
    this.offsetTop = document.getElementById("titleBarIndex").offsetHeight;
    console.log("mounted", this.offsetTop);
    this.pageIndex = 1;
    this.getLeftList();
    this.getList();
  },
  methods: {
    onClickRight() {
      Toast("点击右侧");
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.pageIndex = 1;
      if (this.active == 0) {
        this.getLeftList();
      } else {
        this.getList();
      }
    },
    getLeftList() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        if (this.refreshing) {
          this.refreshing = false;
        }
      }, 1000);
    },
    async getList() {
      this.loading = true;
      setTimeout(() => {
        if (this.pageIndex == 1) {
          this.listRight = [
            { title: "屏幕", url: "/home" },
            { title: "原生适配", url: "/layout" },
            { title: "使用NavBar适配", url: "/layout-title" },
            { title: "form表单", url: "/form-demo" },
          ];
        }
        for (let i = 0; i < 10; i++) {
          this.listRight.push({ title: this.listRight.length + 1 });
        }
        this.loading = false;
        if (this.refreshing) {
          this.refreshing = false;
        }
        this.finished = this.listRight.length >= this.totalServe;
      }, 200);
    },
    onLoad() {
      this.pageIndex += 1;
      if (this.active == 0) {
        this.getLeftList();
      } else {
        this.getList();
      }
    },
    onChangeTabItem() {
      this.pageIndex = 1;
      this.loading = true;
      if (this.active == 0) {
        this.getLeftList();
      } else {
        this.getList();
      }
    },
    onClickItem(item) {
      if (item.url) {
        this.$router.push({
          path: item.url,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped   >
.index {
  width: 100vw;
  height: 100%;
  background-color: #f6f9ff;
}
.item {
  margin: 12px 16px;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  background-color: #fff;
  min-height: 80px;
  display: flex;
  justify-content: center;
}
</style>